<template>
    <div>
        <h1>用户列表</h1>
          <el-button type="primary">添加</el-button>
       <el-table :data="userList" style="width: 100%">
   <el-table-column prop="id" label="编号" width="180" />
    <el-table-column prop="username" label="用户名称" width="180" />
    
    <el-table-column label="Operations">
      <template #default="scope">
        <el-button size="small" @click="handleEdit(scope.$index, scope.row)">
          Edit
        </el-button>
        <el-button
          size="small"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)"
        >
          Delete
        </el-button>
      </template>
    </el-table-column>
  </el-table>
    </div>
</template>

<script setup lang="ts">
import { getUserList } from '@/request';
import {reactive} from 'vue'

const userList=reactive([])
getUserList().then(res=>{
    console.log('getuserlist',res)
    Object.assign(userList,res.data.userData)
})

import { Timer } from '@element-plus/icons-vue'

interface User {
  id: string
  username: string
  address: string
}

const handleEdit = (index: number, row: User) => {
  console.log(index, row)
}
const handleDelete = (index: number, row: User) => {
  console.log(index, row)
}

// const tableData: User[] = [
//   {
//     date: '2016-05-03',
//     name: 'Tom',
//     address: 'No. 189, Grove St, Los Angeles',
//   },
//   {
//     date: '2016-05-02',
//     name: 'Tom',
//     address: 'No. 189, Grove St, Los Angeles',
//   },
//   {
//     date: '2016-05-04',
//     name: 'Tom',
//     address: 'No. 189, Grove St, Los Angeles',
//   },
//   {
//     date: '2016-05-01',
//     name: 'Tom',
//     address: 'No. 189, Grove St, Los Angeles',
//   },
// ]
</script>

<style>

</style>